<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			#div3 {
				width: 82%;
				height: 50px;
				margin: 20px 5%;
			}
			
			#div2 span {
				float: left;
				width: 50px;
				height: 50px;
				margin: 5px;
				border: 1px solid red;
			}
			
			#div2 span.active {
				width: 50px;
				background: yellow;
				border: 1px solid green;
			}
			
			#div4 .div5 {
				width: 41%;
				height: 100px;
				background: yellow;
			}
		</style>
		<script>
			window.onload = function() {
				var b1 = document.getElementById('button1');
				var b2 = document.getElementById('button2');
				var b3 = document.getElementById('button3');
				var b4 = document.getElementById('button4');
				var b5 = document.getElementById('button5');
				var b6 = document.getElementById('button6');
				var p1 = document.getElementById('inputbox');
				var iall = p1.getElementsByTagName('input');

				b1.onclick = function() {
					var i = 0; //初始化
					while(i < 5) //条件
					{
						alert(i); //语句
						//i=i+1;
						i++; //自增
					}
				}

				b2.onclick = function() {
					var s1 = document.getElementsByTagName('span');
					for(var i = 0; i < 4; i = i + 1) {
						if(s1[i].className == 'active') {
							s1[i].className = s1[i].className.replace('active');
						} else {
							s1[i].className = 'active';
						}
					}
				}

				b3.onclick = function() {
					var d4 = document.getElementById('div4');
					var d5 = d4.getElementsByTagName('div');
					for(var i = 0; i < d5.length; i++) {
						if(d5[i].className == 'div5 box box-re') {
							d5[i].className = d5[i].className.replace('div5');
						} else {
							d5[i].className = 'div5 box box-re'
						}
					}
				}
				b4.onclick = function() {
					for(var i = 0; i < iall.length; i++) {
						iall[i].checked = true;
					}
				}
				b5.onclick = function() {
					for(var i = 0; i < iall.length; i++) {
						if(iall[i].checked == true) {
							iall[i].checked = false;
						} else {
							iall[i].checked = true;
						}
					}
				}
				b6.onclick = function() {
					for(var i = 0; i < iall.length; i++) {
						iall[i].checked = false;
					}
				}
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div class="box box-re">
			1、while循环
			<p><button id="button1" type="button">循环出现提示框5次</button></p>
			<p>任何一个循环，基本都包含4个部分。第一：<b>初始化</b>。即：var i=0，var给i一个值，让i从0开始循环；第二：<b>条件</b>。即：while(i
				<5)，每次执行需要判断一下还成不成立，成立的话就继续重复。第三：<b>语句</b>。第四：<b>自增</b>。即：i=i+1，每执行一次语句自动加1，简化写法i++。</p>
		</div>

		<div id="div2" class="box box-re">
			2、for循环
			<p><button id="button2" type="button">批量修改样式</button></p>
			<p>固定元素个数，for循环修改样式。</p>
			<div id="div3"><span></span><span></span><span></span><span></span></div>
		</div>

		<div id="div4" class="box box-re">
			3、if判断for循环
			<p><button id="button3" type="button">批量修改样式</button></p>
			<p>元素个数不定，for循环修改样式。加if判断，再次点击执行返回。</p>
			<div class="box box-re">可循环变化</div>
			<div class="box box-re">可循环变化</div>
			<div class="box box-re">可循环变化</div>
		</div>
		<div class="box box-re">
			4、if判断for循环
			<p id="inputbox"><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /></p>
			<p><button id="button4" type="button">全选</button> <button id="button5" type="button">反选</button> <button id="button6" type="button">不选</button></p>
		</div>
		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>while循环</b>与if用法差不多。if的格式是 if(条件){语句}，但不管条件成立与否，语句只会执行一次。while的格式是 while(条件){语句}，语句执行次数是条件不再成立为止。</p>
			<p><b>for循环</b>与while用法差不多。格式：for(初始化;条件;自增){语句}</p>

		</div>

	</BODY>

</HTML>